<template>
  <div>
    <!-- loading -->
    <div
      v-if="loading"
      style="width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; z-index: 1000; text-align: center;"
    >
      <div style="margin: 20% auto;">
        <a-spin />
      </div>
    </div>

    <div class="menu-box">
      <a-row :gutter="10">
        <a-col :md="14" :sm="24">
          <div class="query-date">
            <span>考核日期：</span>
            <a-select
              v-if="!yearMonthList.loading"
              :value="yearMonthList.value.text"
              @change="changeDate"
            >
              <a-select-option v-for="date in yearMonthList.arr" :key="date.value">{{ date.text }}</a-select-option>
            </a-select>
            <a-select v-else :defaultValue="'数据加载中'" disabled></a-select>
          </div>

          <div class="query-type">
            <span>园区筛选：</span>
            <a-select :value="departInfo.value.text" @change="typeChange">
              <a-select-option v-for="types in departInfo.arr" :key="types.value">{{ types.text }}</a-select-option>
            </a-select>
          </div>

          <div class="query-depart">
            <span>查看维度：</span>
            <a-select :value="departdepart.value.text" @change="departChange">
              <a-select-option
                v-for="depart in departdepart.arr"
                :key="depart.value"
              >{{ depart.text }}</a-select-option>
            </a-select>
          </div>
        </a-col>
      </a-row>
    </div>

    <div v-show="this.departdepart.value.value=='growAndValue' && !(this.departInfo.value.value)">
      <!-- #f0f2f5 -->
      <!-- dom1 -->
      <div
        style="background: #fff;margin:0 !important; padding: 0px;overflow:auto; white-space: nowrap;"
      >
        <a-card style="width:50%;display: inline-block;" class="topl">
          <div>
            <div class="grid-chart-border">
              <!-- <h2>净收入&利润</h2> -->
              <div
                id="myChart"
                class="mychart"
                style="width:100%;"
                :style="'height:'+335+'px'"
                ref="refEChart"
              ></div>
              <a-table
                :columns="columns"
                :dataSource="dataSource[0][0]"
                :showHeader="true"
                :pagination="false"
                size="small"
                :scroll="{ x: 900 }"
                v-show="dataSource[0][0].length"
              >
                <!-- showHeader  表格表头显示隐藏 -->
                <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
              </a-table>
            </div>
          </div>
        </a-card>
        <a-card style="width:50%;display: inline-block;" class="topr">
          <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
          <div
            id="myChart_r"
            class="completion-on-chart"
            style="width:100%;"
            :style="'height:'+pieheigth_l+'px'"
            ref="refEChart"
          ></div>
        </a-card>
        <!-- top1子菜单 -->
        <a-card class style="width:100%; overflow-y: hidden;">
          <a-collapse accordion :bordered="false" :forceRender="true" @change="changes">
            <a-collapse-panel key="1" header :forceRender="true">
              <!-- 1 -->
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <!-- <h2>净收入&利润</h2> -->
                    <div
                      id="myChart_child1"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[0][1]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[0][1].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
                <div
                  id="myChart_child1_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l+'px'"
                  ref="refEChart"
                ></div>
              </a-card>
              <!-- 2 -->
              <br />
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <!-- <h2>净收入&利润</h2> -->
                    <div
                      id="myChart_child2"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[0][2]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[0][2].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
                <div
                  id="myChart_child2_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l+'px'"
                  ref="refEChart"
                ></div>
              </a-card>

              <!-- 3 -->
              <br />
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <div
                      id="myChart_child3"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[0][3]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[0][3].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
                <div
                  id="myChart_child3_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l+'px'"
                  ref="refEChart"
                ></div>
              </a-card>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </div>
      <!-- dom2 -->
      <div
        style="background: #fff;margin:0 !important; padding: 0px;overflow:auto; white-space: nowrap;"
      >
        <a-card style="width:50%;display: inline-block;" class="topl">
          <div>
            <div class="grid-chart-border">
              <!-- <h2>净收入&利润</h2> -->
              <div
                id="myChart2"
                class="mychart"
                style="width:100%;"
                :style="'height:'+335+'px'"
                ref="refEChart"
              ></div>
              <a-table
                :columns="columns"
                :dataSource="dataSource[1][0]"
                :showHeader="true"
                :pagination="false"
                size="small"
                :scroll="{ x: 900 }"
                v-show="dataSource[1][0].length"
              >
                <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
              </a-table>
            </div>
          </div>
        </a-card>
        <a-card style="width:50%;display: inline-block;" class="topr">
          <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
          <div
            id="myChart2_r"
            class="completion-on-chart"
            style="width:100%;"
            :style="'height:'+pieheigth_l+'px'"
            ref="refEChart"
          ></div>
        </a-card>
        <!-- top1子菜单 -->
        <a-card class style="width:100%;overflow-y: hidden;">
          <a-collapse accordion :bordered="false" :forceRender="true" @change="changes">
            <a-collapse-panel key="2" header :forceRender="true">
              <!-- 1 -->
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <!-- <h2>净收入&利润</h2> -->
                    <div
                      id="myChart2_child1"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[1][1]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[1][1].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
                <div
                  id="myChart2_child1_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l+'px'"
                  ref="refEChart"
                ></div>
              </a-card>
              <!-- 2 -->
              <br />
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <!-- <h2>净收入&利润</h2> -->
                    <div
                      id="myChart2_child2"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[1][2]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[1][2].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
                <div
                  id="myChart2_child2_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l+'px'"
                  ref="refEChart"
                ></div>
              </a-card>

              <!-- 3 -->
              <br />
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <div
                      id="myChart2_child3"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[1][3]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[1][3].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <!-- <div class="completion-on-chart" ref="chartCompletionOn"></div> -->
                <div
                  id="myChart2_child3_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l+'px'"
                  ref="refEChart"
                ></div>
              </a-card>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </div>
      <!-- dom3 -->
      <div
        style="background: #fff;margin:0 !important; padding: 0px;overflow:auto; white-space: nowrap;"
      >
        <a-card style="width:50%;display: inline-block;" class="topl">
          <div>
            <div class="grid-chart-border">
              <div
                id="myChart3"
                class="mychart"
                style="width:100%;"
                :style="'height:'+335+'px'"
                ref="refEChart"
              ></div>
              <a-table
                :columns="columns"
                :dataSource="dataSource[2][0]"
                :showHeader="true"
                :pagination="false"
                size="small"
                :scroll="{ x: 900 }"
                v-show="dataSource[2][0].length"
              >
                <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
              </a-table>
            </div>
          </div>
        </a-card>
        <a-card style="width:50%;display: inline-block;" class="topr">
          <div
            id="myChart3_r"
            class="completion-on-chart"
            style="width:100%;"
            :style="'height:'+pieheigth_l2+'px'"
            ref="refEChart"
          ></div>
        </a-card>
        <!-- top1子菜单 -->
        <a-card class style="width:100%;overflow-y: hidden;">
          <a-collapse accordion :bordered="false" :forceRender="true" @change="changes">
            <a-collapse-panel key="3" header :forceRender="true">
              <!-- 1 -->
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <div
                      id="myChart3_child1"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[2][1]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[2][1].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <div
                  id="myChart3_child1_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l2+'px'"
                  ref="refEChart"
                ></div>
              </a-card>
              <!-- 2 -->
              <br />
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <div
                      id="myChart3_child2"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[2][2]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[2][2].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <div
                  id="myChart3_child2_r"
                  class="completion-on-chart"
                  style="width:100%;"
                  :style="'height:'+pieheigth_l2+'px'"
                  ref="refEChart"
                ></div>
              </a-card>

              <!-- 3 -->
              <br />
              <a-card style="display: inline-block;" :style="'width:'+clowdith_l+'px'">
                <div>
                  <div class="grid-chart-border">
                    <div
                      id="myChart3_child3"
                      class="mychart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns"
                      :dataSource="dataSource[2][3]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[2][3].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+clowdith_r+'px'">
                <div>
                  <div class="grid-chart-border">
                    <div
                      id="myChart3_child3_r"
                      class="completion-on-chart"
                      style="width:100%;"
                      :style="'height:'+335+'px'"
                      ref="refEChart"
                    ></div>
                    <a-table
                      :columns="columns1"
                      :dataSource="dataSource[2][4]"
                      :showHeader="true"
                      :pagination="false"
                      size="small"
                      :scroll="{ x: 900 }"
                      v-show="dataSource[2][4].length"
                    >
                      <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                    </a-table>
                  </div>
                </div>
              </a-card>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </div>
    </div>

    <div v-show="this.departdepart.value.value=='fuseAndBiz'">
      <div
        style="background: #fff;margin:0 !important; padding: 0px;overflow:auto; white-space: nowrap;"
      >
        <a-card style="width:33.3%;display: inline-block;" class="selectchild_w">
          <div class="grid-chart-border">
            <div
              id="sel_myChart_child0"
              class="mychart"
              style="width:100%;"
              :style="'height:'+335+'px'"
              ref="refEChart"
            ></div>
            <a-table
              :columns="columns"
              :dataSource="dataSource[3][0]"
              :showHeader="true"
              :pagination="false"
              size="small"
              :scroll="{ x: 900 }"
              v-show="dataSource[3][0].length"
            >
              <!-- showHeader  表格表头显示隐藏 -->
              <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
            </a-table>
          </div>
        </a-card>
        <a-card style="width:33.3%;display: inline-block;" class="selectchild_w">
          <div class="grid-chart-border">
            <div
              id="sel_myChart_child1"
              class="mychart"
              style="width:100%;"
              :style="'height:'+335+'px'"
              ref="refEChart"
            ></div>
            <a-table
              :columns="columns"
              :dataSource="dataSource[3][1]"
              :showHeader="true"
              :pagination="false"
              size="small"
              :scroll="{ x: 900 }"
              v-show="dataSource[3][1].length"
            >
              <!-- showHeader  表格表头显示隐藏 -->
              <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
            </a-table>
          </div>
        </a-card>
        <a-card style="width:33.3%;display: inline-block;" class="selectchild_w">
          <div>
            <div class="grid-chart-border">
              <div
                id="sel_myChart_child2"
                class="mychart"
                style="width:100%;"
                :style="'height:'+387+'px'"
                ref="refEChart"
              ></div>
              <a-table
                :columns="columns"
                :dataSource="dataSource[3][2]"
                :showHeader="true"
                :pagination="false"
                size="small"
                :scroll="{ x: 900 }"
                v-show="dataSource[3][2].length"
              >
                <!-- showHeader  表格表头显示隐藏 -->
                <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
              </a-table>
            </div>
          </div>
        </a-card>
        <!-- 9子菜单 -->
        <a-card class style="width:100%;overflow-y: hidden;">
          <a-collapse accordion :bordered="false" @change="sel_changes">
            <a-collapse-panel key="999" header :forceRender="true">
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child3"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][3]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][3].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child4"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][4]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][4].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child5"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+387+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][5]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][5].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <br />
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child6"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][6]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][6].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child7"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][7]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][7].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child8"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+387+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][8]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][8].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <br />
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child9"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][9]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][9].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child10"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][10]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][10].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
              <a-card style="display: inline-block;" :style="'width:'+selectchild_w+'px'">
                <div class="grid-chart-border">
                  <div
                    id="sel_myChart_child11"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[3][11]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[3][11].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </div>
    </div>

    <div v-show="this.departdepart.value.value=='growAndValue' &&!!(this.departInfo.value.value)">
      <div
        style="background: #fff;margin:0 !important; padding: 0px;overflow:auto; white-space: nowrap;"
        v-for="(i,index) in allTestData"
        :key="index"
        class="nowperwidth"
      >
        <a-card style="width:70%;display: inline-block;">
          <div>
            <div class="grid-chart-border">
              <div
                :id="'myChart_Nonnational'+index"
                class="mychart"
                style="width:100%;"
                :style="'height:'+335+'px'"
                ref="refEChart"
              ></div>
              <a-table
                :columns="columns"
                :dataSource="dataSource[4+index][0]"
                :showHeader="true"
                :pagination="false"
                size="small"
                :scroll="{ x: 900 }"
                v-show="dataSource[4+index][0].length"
              >
                <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
              </a-table>
            </div>
          </div>
        </a-card>
        <a-card style="width:30%;display: inline-block;" class="topr">
          <div
            :id="'myChart_Nonnational_r'+index"
            class="completion-on-chart"
            style="width:100%;"
            :style="'height:'+pieheigth_l+'px'"
            ref="refEChart"
          ></div>
        </a-card>
        <a-card class style="width:100%; overflow-y: hidden;">
          <a-collapse accordion :bordered="false" :forceRender="true" @change="changes">
            <a-collapse-panel :key="index" header :forceRender="true">
              <a-card style="display: inline-block;" :style="'width:'+nowperwidth+'px'">
                <div class="grid-chart-border">
                  <div
                    :id="'myChart_Nonnational_child0'+index"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[4+index][1]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[4+index][1].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>

              <a-card style="display: inline-block;" :style="'width:'+nowperwidth+'px'">
                <div class="grid-chart-border">
                  <div
                    :id="'myChart_Nonnational_child1'+index"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[4+index][2]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[4+index][2].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>

              <a-card style="display: inline-block;" :style="'width:'+nowperwidth+'px'">
                <div class="grid-chart-border">
                  <div
                    :id="'myChart_Nonnational_child2'+index"
                    class="mychart"
                    style="width:100%;"
                    :style="'height:'+335+'px'"
                    ref="refEChart"
                  ></div>
                  <a-table
                    :columns="columns"
                    :dataSource="dataSource[4+index][3]"
                    :showHeader="true"
                    :pagination="false"
                    size="small"
                    :scroll="{ x: 900 }"
                    v-show="dataSource[4+index][3].length"
                  >
                    <span class="completion-on-block" slot="name" slot-scope="text" v-html="text"></span>
                  </a-table>
                </div>
              </a-card>
            </a-collapse-panel>
          </a-collapse>
        </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import { filterObj } from '@/utils/util'
import { getAction, putAction, postAction } from '@/api/manage'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { drawBgChart, line } from './chart/chart.js'
import { json } from './chart/json.js'
import { updateTheme, updateColorWeak, colorList } from '@/components/tools/setting'
import echarts from 'echarts'

// import TestData from './chart/2' //引入模拟josn文件

export default {
  name: 'screenkpi',
  // mixins: [JeecgListMixin],
  components: {},
  data() {
    return {
      height: window.innerHeight - 140 + 'px',
      columns: [],
      columns1: [],

      /* 年月下拉菜单 */
      yearMonthList: {
        loading: false,
        arr: [], // 可选择的年月列表
        value: {} // 已选年月，默认数组第 0 个
      },
      //
      departInfo: {
        arr: [], // 可选择的年月列表
        value: {} // 已选年月，默认数组第 0 个
      },
      departdepart: {
        arr: [], // 可选择的年月列表
        value: {} // 已选年月，默认数组第 0 个
      },
      dataSource: [
        {
          0: [],
          1: [],
          2: [],
          3: []
        },
        {
          0: [],
          1: [],
          2: [],
          3: []
        },
        {
          0: [],
          1: [],
          2: [],
          3: [],
          4: []
        },
        {
          0: [],
          1: [],
          2: [],
          3: [],
          4: [],
          5: [],
          6: [],
          7: [],
          8: [],
          9: [],
          10: [],
          11: []
        },
        {
          0: [],
          1: [],
          2: [],
          3: []
        },
        {
          0: [],
          1: [],
          2: [],
          3: []
        },
        {
          0: [],
          1: [],
          2: [],
          3: []
        }
      ],
      loading: true,
      dataTK: [],
      minHeight: 250,
      mychart: [],
      bgchart: [],
      gardenGroups: [],
      hospitalGroups: [],
      gardenGroupsData: [],
      hospitalGroupsData: [],
      groupshow: true,
      groupchart: [],
      btngroupName: null,
      url: {
        getBtnGroups: '/api/pms/kpiView', //获取按钮
        gardenGroups: '/api/pms/kpiViewCommunity', //获取社区
        hospitalGroups: '/api/pms/kpiViewHospital', //获取医院
        kpiCondition: '/api/pms/kpiCondition', //看板三个查询条件
        kpiView: '/api/pms/kpiView' // BI
      },
      allTestData: [] || {}, //图标数据集
      selecetmodel: false,
      clowdith_l: 0,
      clowdith_r: 0,
      chenckedWidth:0,
      chenckedWidth_l:0,
      selectchild_w: 0,
      nowperwidth: 0,
      pieheigth_l: 295,
      pieheigth_l2: 295
    }
  },
  created() {
    ;(this.columns = [
      {
        title: '', //新增表头
        align: 'left',
        dataIndex: 'name',
        width: 90,
        fixed: 'left',
        scopedSlots: { customRender: 'name' }
      }
    ].concat(
      new Array(12).fill('').map((item, index) => {
        return {
          title: (index - 0 + 1 > 9 ? index - 0 + 1 : '0' + (index - 0 + 1)) + '月', //新增表头
          align: 'center',
          dataIndex: 'm' + (index - 0 + 1 > 9 ? index - 0 + 1 : '0' + (index - 0 + 1)),
          width: 150,
          scopedSlots: { customRender: 'name' }
        }
      })
    )),
      //
      (this.columns1 = [
        {
          title: '', //新增表头
          align: 'center',
          dataIndex: 'name',
          width: 90,
          fixed: 'left',
          scopedSlots: { customRender: 'name' }
        }
      ].concat(
        ['燕园', '申园', '粤园', '蜀园', '吴园', '楚园', '大清谷'].map((item, index) => {
          return {
            title: item, //新增表头
            align: 'center',
            dataIndex: 'A01A01A01G0' + (index + 1),
            width: 150,
            scopedSlots: { customRender: 'name' }
          }
        })
      )),
      (this.yearMonthList.loading = true)
    this.kpiCondition()
  },
  mounted() {
    this.$nextTick(() => {
      // 监听 window 窗口变化，自适应图表
      window.addEventListener('resize', this.resizeChart)
    })
    // this.drawPro(this.gardenGroups)
    updateTheme('#FA541C')
  },
  methods: {
    // sel_myChart_child: function(index) {
    //   debugger
    //   return 'sel_myChart_child' + index
    // },
    changes() {},
    sel_changes() {},
    resizeChart() {},
    kpiCondition() {
      let _this = this
      getAction(_this.url.kpiCondition)
        .then(res => {
          if (res.success) {
            _this.yearMonthList = {
              loading: false,
              arr: res.result.indexYearMonth, // 可选年份下拉选项
              value: res.result.indexYearMonth[0] // 默认选第 0 项
            }

            _this.departInfo = {
              arr: res.result.indexDepartGroupList, // 可选年份下拉选项
              value: res.result.indexDepartGroupList[0] // 默认选第 0 项
            }
            _this.departdepart = {
              arr: res.result.dimensionalityList, // 可选年份下拉选项
              value: res.result.dimensionalityList[0] // 默认选第 0 项
            }
            // this.gardenGroups = JSON.parse(JSON.stringify(this.btnData.orgC)).map(item=>
            //     {item.type='default'; return item;})
            // this.hospitalGroups = JSON.parse(JSON.stringify(this.btnData.orgH)).map(item=>
            //     {item.type='default'; return item;})
            // this.progressGroup = JSON.parse(JSON.stringify(this.progressGroup)).map(item=>
            //     {item.value = parseFloat( this.btnData.progress[item.type]) ; return item;})
          }
        })
        .then(res => {
          _this.queryBtnGroups()
        })
        .catch(error => {
          _this.yearMonthList.loading = false
          _this.$message.error(error.message)
        })
    },
    queryBtnGroups() {
      let self = this
      self.loading = true

      self.clowdith_l =self.chenckedWidth= document.getElementsByClassName('topl')[0].offsetWidth>0? document.getElementsByClassName('topl')[0].offsetWidth- 20:self.chenckedWidth
      self.clowdith_r = self.chenckedWidth_l=document.getElementsByClassName('topr')[0].offsetWidth>0?document.getElementsByClassName('topr')[0].offsetWidth:self.chenckedWidth_l

      const hide = self.$message.loading('正在查询...', 0)
      let data = {
        indexYearMonth: self.yearMonthList.value.value,
        indexDepartGroup: self.departInfo.value.value,
        dimensionality: self.departdepart.value.value
      }
      postAction(self.url.kpiView, data)
        .then(res => {
          if (res.success) {
            // self.gardenGroups = JSON.parse(JSON.stringify(self.btnData.orgC)).map(item=>
            //     {item.type='default'; return item;})
            // self.hospitalGroups = JSON.parse(JSON.stringify(self.btnData.orgH)).map(item=>
            //     {item.type='default'; return item;})
            // self.progressGroup = JSON.parse(JSON.stringify(self.progressGroup)).map(item=>
            //     {item.value = parseFloat( self.btnData.progress[item.type]) ; return item;})
            if (this.departdepart.value.value != 'fuseAndBiz') {
              self.allTestData = res.result
            }
            // self.$set(self, 'selecetmodel', true)
            self.$nextTick(() => {
              self.drawPro(res.result)
            })
            setTimeout(hide, 2500)
          }
        })
        .catch(error => {
          self.loading = false

          self.$message.error(error.message)
        })
    },
    // 总数据集合
    drawPro(data) {
      this.loading = false
      // 基于准备好的dom，初始化echarts实例
      // this.pieheigth_l=532;
      // this.pieheigth_l2=394;
      // 增加表格表头高度
      this.pieheigth_l = 578
      this.pieheigth_l2 = 540

      this.$nextTick(function() {
        // 绘制图表
        // 表1左
        //data:对象
        //全国、园区:业态
        if (this.departdepart.value.value == 'fuseAndBiz') {
          this.selectchild_w = document.getElementsByClassName('selectchild_w')[0].offsetWidth - 20
          let sel_myChart_child0 = this.$echarts.init(document.getElementById('sel_myChart_child0'))
          let option1 = this.drawChart(data[0], 0, 3)
          sel_myChart_child0.setOption(option1)
          this.mychart.push(sel_myChart_child0)

          let sel_myChart_child1 = this.$echarts.init(document.getElementById('sel_myChart_child1'))
          let option2 = this.drawChart(data[1], 1, 3)
          sel_myChart_child1.setOption(option2)
          this.mychart.push(sel_myChart_child1)

          let sel_myChart_child2 = this.$echarts.init(document.getElementById('sel_myChart_child2'))
          let option3 = this.drawChart(data[2], 2, 3, 'tabs_3')
          sel_myChart_child2.setOption(option3)
          this.mychart.push(sel_myChart_child2)

          for (let index = 3; index < data.length; index++) {
            let el = data[index],
              option
            let myChart = this.$echarts.init(document.getElementById('sel_myChart_child' + index))
            if (index == 5 || index == 8) {
              option = this.drawChart(el, index, 3, 'tabs_3')
            } else {
              option = this.drawChart(el, index, 3)
            }
            myChart.setOption(option, true)
            let resize = {
              width: this.selectchild_w
            }
            myChart.resize(resize)
            this.mychart.push(myChart)
          }
        } else if (!!this.departInfo.value.value && this.departdepart.value.value == 'growAndValue') {
          //园区：价值

          this.nowperwidth = document.getElementsByClassName('nowperwidth')[0].offsetWidth / 3 - 6
          for (let index = 0; index < data.length; index++) {
            let t = data[index]
            if (index == data.length - 1) {
              let myChart = this.$echarts.init(document.getElementById('myChart_Nonnational' + index))
              document.getElementById('myChart_Nonnational' + index).style.height = '373px'
              let option = this.drawChart(data[index].data1, 0, 4 + index, 'tabs_3')
              myChart.setOption(option, true)
              this.mychart.push(myChart)
            } else {
              let myChart = this.$echarts.init(document.getElementById('myChart_Nonnational' + index))
              let option = this.drawChart(data[index].data1, 0, 4 + index)
              myChart.setOption(option)
              this.mychart.push(myChart)
            }
            // 表1右
            let myChart_r = this.$echarts.init(document.getElementById('myChart_Nonnational_r' + index))
            let option2 = this.drawChart3(data[index].data4, index)
            myChart_r.setOption(option2, true)
            this.mychart.push(myChart_r)

            let resize = {
              width: this.nowperwidth
            }
            if (index == data.length - 1) {
              //销售情况子级图一图二
              let myChart2 = this.$echarts.init(document.getElementById('myChart_Nonnational_child0' + index))
              document.getElementById('myChart_Nonnational_child0' + index).style.height = '373px'
              let option3 = this.drawChart(data[index].child[0].data1, 1, 4 + index, 'tabs_3')
              myChart2.setOption(option3, true)
              myChart2.resize(resize)
              this.mychart.push(myChart2)

              let myChart1 = this.$echarts.init(document.getElementById('myChart_Nonnational_child1' + index))
              document.getElementById('myChart_Nonnational_child1' + index).style.height = '373px'
              let option4 = this.drawChart(data[index].child[1].data1, 2, 4 + index, 'tabs_3')
              myChart1.setOption(option4, true)
              myChart1.resize(resize)
              this.mychart.push(myChart1)
            } else {
              let myChart2 = this.$echarts.init(document.getElementById('myChart_Nonnational_child0' + index))
              let option3 = this.drawChart(data[index].child[0].data1, 1, 4 + index)
              myChart2.setOption(option3, true)
              myChart2.resize(resize)
              this.mychart.push(myChart2)

              let myChart1 = this.$echarts.init(document.getElementById('myChart_Nonnational_child1' + index))
              let option4 = this.drawChart(data[index].child[1].data1, 2, 4 + index)
              myChart1.setOption(option4, true)
              myChart1.resize(resize)
              this.mychart.push(myChart1)
            }

            let myChart3 = this.$echarts.init(document.getElementById('myChart_Nonnational_child2' + index))
            let option5 = this.drawChart(data[index].child[2].data1, 3, 4 + index)
            myChart3.setOption(option5, true)
            myChart3.resize(resize)
            this.mychart.push(myChart3)
          }
        } else {
          // 全国：价值

          document.getElementById('myChart').style.width = this.clowdith_l + 20 + 'px'
          let myChart = this.$echarts.init(document.getElementById('myChart'))
          let option = this.drawChart(data[0].data1, 0, 0)
          myChart.setOption(option, true)
          this.mychart.push(myChart)
          // 表1右
          let myChart_r = this.$echarts.init(document.getElementById('myChart_r'))
          let option2 = this.drawChart2(data, 0, 0)
          myChart_r.setOption(option2, true)
          this.mychart.push(myChart_r)
          // 表1子级1
          document.getElementById('myChart_child1').style.width =
            document.getElementById('myChart').offsetWidth - 15 + 'px'
          let myChart_child1 = this.$echarts.init(document.getElementById('myChart_child1'))
          let option3 = this.drawChart(data[0].child[0].data1, 1, 0)
          myChart_child1.setOption(option3)
          this.mychart.push(myChart_child1)

          document.getElementById('myChart_child1_r').style.width =
            document.getElementById('myChart_r').offsetWidth - 5 + 'px'
          let myChart_child1_r = this.$echarts.init(document.getElementById('myChart_child1_r'))
          let option4 = this.drawChart2(data, 1, 0)
          myChart_child1_r.setOption(option4)
          this.mychart.push(myChart_child1_r)

          // 表1子级2
          document.getElementById('myChart_child2').style.width =
            document.getElementById('myChart').offsetWidth - 15 + 'px'
          let myChart_child2 = this.$echarts.init(document.getElementById('myChart_child2'))
          let option5 = this.drawChart(data[0].child[1].data1, 2, 0)
          myChart_child2.setOption(option5)
          this.mychart.push(myChart_child2)

          document.getElementById('myChart_child2_r').style.width =
            document.getElementById('myChart_r').offsetWidth - 5 + 'px'
          let myChart_child2_r = this.$echarts.init(document.getElementById('myChart_child2_r'))
          let option6 = this.drawChart2(data, 2, 0)
          myChart_child2_r.setOption(option6)
          this.mychart.push(myChart_child2_r)

          // 表1子级3
          document.getElementById('myChart_child3').style.width =
            document.getElementById('myChart').offsetWidth - 15 + 'px'
          let myChart_child3 = this.$echarts.init(document.getElementById('myChart_child3'))
          let option7 = this.drawChart(data[0].child[2].data1, 3, 0)
          myChart_child3.setOption(option7)
          this.mychart.push(myChart_child3)

          document.getElementById('myChart_child3_r').style.width =
            document.getElementById('myChart_r').offsetWidth - 5 + 'px'
          let myChart_child3_r = this.$echarts.init(document.getElementById('myChart_child3_r'))
          let option8 = this.drawChart2(data, 3, 0)
          myChart_child3_r.setOption(option8)
          this.mychart.push(myChart_child3_r)

          for (let index = 1; index < data.length; index++) {
            const element = data[index]
            let i = index + 1
            // 绘制图表
            // 表左
            let myChart = this.$echarts.init(document.getElementById('myChart' + i))
            let option = this.drawChart(data[index].data1, 0, index)
            myChart.setOption(option)
            this.mychart.push(myChart)
            // 表右
            let myChart_r = this.$echarts.init(document.getElementById('myChart' + i + '_r'))
            let option2 = this.drawChart2(data, 0, index)
            myChart_r.setOption(option2, true)
            this.mychart.push(myChart_r)
            // 表子级1
            document.getElementById('myChart' + i + '_child1').style.width =
              document.getElementById('myChart').offsetWidth - 15 + 'px'
            let myChart_child1 = this.$echarts.init(document.getElementById('myChart' + i + '_child1'))
            let option3 = this.drawChart(data[index].child[0].data1, 1, index)
            myChart_child1.setOption(option3)
            this.mychart.push(myChart_child1)

            document.getElementById('myChart' + i + '_child1_r').style.width =
              document.getElementById('myChart_r').offsetWidth - 5 + 'px'
            let myChart_child1_r = this.$echarts.init(document.getElementById('myChart' + i + '_child1_r'))
            let option4 = this.drawChart2(data, 1, index)
            myChart_child1_r.setOption(option4)
            this.mychart.push(myChart_child1_r)

            // 表子级2
            document.getElementById('myChart' + i + '_child2').style.width =
              document.getElementById('myChart').offsetWidth - 15 + 'px'
            let myChart_child2 = this.$echarts.init(document.getElementById('myChart' + i + '_child2'))
            let option5 = this.drawChart(data[index].child[1].data1, 2, index)
            myChart_child2.setOption(option5)
            this.mychart.push(myChart_child2)

            document.getElementById('myChart' + i + '_child2_r').style.width =
              document.getElementById('myChart_r').offsetWidth - 5 + 'px'
            let myChart_child2_r = this.$echarts.init(document.getElementById('myChart' + i + '_child2_r'))
            let option6 = this.drawChart2(data, 2, index)
            myChart_child2_r.setOption(option6)
            this.mychart.push(myChart_child2_r)

            // 表子级3
            document.getElementById('myChart' + i + '_child3').style.width =
              document.getElementById('myChart').offsetWidth - 15 + 'px'
            let myChart_child3 = this.$echarts.init(document.getElementById('myChart' + i + '_child3'))
            let option7 = this.drawChart(data[index].child[2].data1, 3, index)
            myChart_child3.setOption(option7)
            this.mychart.push(myChart_child3)

            if (i == data.length) {
              document.getElementById('myChart' + i + '_child3_r').style.width =
                this.clowdith_r - 5 + 'px'
              let myChart_child3_r = this.$echarts.init(document.getElementById('myChart' + i + '_child3_r'))
              let option8 = this.drawChart(data[index].child[2].data2, 4, index)
              myChart_child3_r.setOption(option8)
              this.mychart.push(myChart_child3_r)
            } else {
              document.getElementById('myChart' + i + '_child3_r').style.width =
                document.getElementById('myChart_r').offsetWidth - 5 + 'px'
              let myChart_child3_r = this.$echarts.init(document.getElementById('myChart' + i + '_child3_r'))
              let option8 = this.drawChart2(data, 3, index)
              myChart_child3_r.setOption(option8)
              this.mychart.push(myChart_child3_r)
            }
          }
        }

        this.initResize()
      })
    },
    initResize() {
      const self = this //因为箭头函数会改变this指向，指向windows。所以先把this保存
      setTimeout(() => {
        self.mychart[0].resize()
        window.addEventListener('resize', function() {
          self.mychart[0].resize()
        })
      }, 10)
    },
    drawbg(data) {
      // 基于准备好的dom，初始化echarts实例
      this.$nextTick(function() {
        var bgchart = document.querySelectorAll('.bgchart')
        for (var i = 0; i < bgchart.length; i++) {
          this.bgchart.push(this.$echarts.init(bgchart[i]))
          // 绘制图表
          this.bgchart[this.bgchart.length - 1].setOption(
            drawBgChart(data[this.itemKeys[i].type], this.itemKeys[i].name)
          )
          this.bgResize(this.bgchart, i)
        }
      })
    },
    bgResize(data, index) {
      setTimeout(() => {
        data[index].resize()
        window.addEventListener('resize', function() {
          data[index].resize()
        })
      }, 10)
    },
    drawGroup(data, name) {
      this.$nextTick(function() {
        // this.groupshow = true
        var groupchart = document.querySelectorAll('.groupchart')
        for (var i = 0; i < groupchart.length; i++) {
          this.groupchart.push(this.$echarts.init(groupchart[i]))
          // 绘制图表
          this.groupchart[this.groupchart.length - 1].setOption(line(data, name))
          this.bgResize(this.groupchart, i)
        }
      })
    },
    /* top1左侧 */
    drawChart(datas, type, dio, text) {
      // datas 左侧图标渲染具体数据      type纵向图标顺序    dio 大类下标:2为全国价值——销售/3为全国融合看板/4为园区
      var datacolumnar = datas
      let legenddata1 = [],
        legenddata2 = []
      for (const key in datas.value) {
        if (datas.value.hasOwnProperty(key)) {
          legenddata1.push(datas.value[key])
        }
      }
      for (const key in datas.contrasts) {
        if (datas.contrasts.hasOwnProperty(key)) {
          legenddata2.push(datas.contrasts[key])
        }
      }
      if ((dio == 2 && (type != 4&&type != 3)) || text == 'tabs_3') {
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          dataZoom: [
            {
              type: 'slider',
              show: false, //flase直接隐藏图形
              xAxisIndex: [0],
              left: '5%', //滚动条靠左侧的百分比
              bottom: -5,
              start: 0, //滚动条的起始位置
              end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
            }
          ],
          grid: {
            bottom: 0,
            left: 10,
            right: 10,
            containLabel: true
          },
          legend: [
            {
              x: 'right',
              // data: ['达成率(%)', '同比(%)']
              data: legenddata2
            },
            {
              x: 'right',
              top: '10%',
              // data: ['今年预算(万元)', '今年实际(万元)', '去年实际(万元)']
              data: legenddata1
            }
          ],
          xAxis: [
            {
              // data: category,
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: {
                lineStyle: {
                  color: '#8b8b8b'
                }
              }
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#8b8b8b'
                }
              },
              min: datacolumnar.value.minValue,
              max: datacolumnar.value.maxValue
            },
            {
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#8b8b8b'
                }
              },
              // min: rightCount,
              min: datacolumnar.contrasts ? datacolumnar.contrasts.minValue : 0,
              max: datacolumnar.contrasts ? datacolumnar.contrasts.maxValue : 0,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          title: {
            text: datacolumnar.title,
            left:'3%',
            top:10
          },
          series: [
            {
              name: datas.contrasts.series1Title,
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              barGap: 0, //间距
              animationDuration: 1500,
              // symbol: 'emptyCircle',
              itemStyle: {
                normal: {
                  color: '#ea9e9b'
                }
              },
              yAxisIndex: 1,
              symbolSize: 8,
              // data: datacolumnar.contrasts.series1
              data: []
            },
            {
              name: datas.contrasts.series2Title,
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              barGap: 0, //间距
              animationDuration: 1500,
              // symbol: 'emptyCircle',
              itemStyle: {
                normal: {
                  color: '#5e9df8'
                }
              },
              yAxisIndex: 1,
              symbolSize: 8,
              // data: datacolumnar.contrasts.series1
              data: []
            },
            {
              name: datas.value.series1Title,
              type: 'bar',
              symbol: 'rect',
              animationDuration: 1500,
              barGap: '0',
              // barWidth: 10,
              itemStyle: {
                normal: {
                  color: '#e4ad40'
                }
              },
              // data: datacolumnar.value.series1
              data: []
            },
            {
              name: datas.value.series2Title,
              type: 'bar',
              symbol: 'rect',
              barGap: '0',
              animationDuration: 1500,
              itemStyle: {
                normal: {
                  color: '#ccc'
                }
              },
              // symbolOffset: ['-152%', '-100%'],
              symbolRepeat: true,
              symbolSize: [8, 4],
              symbolMargin: 1,
              z: -10,
              // data: datacolumnar.value.series2
              data: []
            }
          ]
        }
        option.xAxis[1] = {
          type: 'value',
          max: option.xAxis[0].data.length * 100,
          show: false
        }
        let values = datacolumnar.value || {},
          contrasts = datacolumnar.contrasts || {},
          contrastsseries1 = [],
          contrastsseries2 = [],
          valuesseries1 = [],
          valuesseries2 = []

        this.dataSource[dio][type] = [
          {
            name: `${values.series1Title}<span class="mine-color-e4ad40"></span>`,
            ...values.series1
          },
          {
            name: `${values.series2Title}<span class="mine-color-ccc"></span>`,
            ...values.series2
          },
          {
            name: `${contrasts.series1Title}<span class="mine-color-ea9e9b"></span>`,
            ...contrasts.series1
          },
          {
            name: `${contrasts.series2Title}<span class="mine-color-5e9df8"></span>`,
            ...contrasts.series2
          }
        ]
        for (let i = 1; i <= 12; i++) {
          let mId = 'm' + (i < 10 ? '0' + i : i)
          let dseries1 = parseFloat(contrasts.series1[mId])
          let dseries2 = parseFloat(contrasts.series2[mId])
          let _series1 = parseFloat(values.series1[mId])
          let _series2 = parseFloat(values.series2[mId])
          contrastsseries1.push(dseries1)
          contrastsseries2.push(dseries2)
          valuesseries1.push(_series1)
          valuesseries2.push(_series2)
        }
        option.series[0].data = contrastsseries1
        option.series[1].data = contrastsseries2
        option.series[2].data = valuesseries1
        option.series[3].data = valuesseries2

        return option
      } else {
        var option = {
          // backgroundColor: '#ffffff',
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          dataZoom: [
            {
              type: 'slider',
              show: false, //flase直接隐藏图形
              xAxisIndex: [0],
              left: '5%', //滚动条靠左侧的百分比
              bottom: -5,
              start: 0, //滚动条的起始位置
              end: 100 //滚动条的截止位置（按比例分割你的柱状图x轴长度）
            }
          ],
          grid: {
            bottom: 0,
            left: 10,
            right: 10,
            containLabel: true
          },
          legend: [
            {
              x: 'right',
              // data: ['达成率(%)', '同比(%)']
              data: legenddata2
            },
            {
              x: 'right',
              top: '10%',
              // data: ['今年预算(万元)', '今年实际(万元)', '去年实际(万元)']
              data: legenddata1
            }
          ],
          xAxis: [
            {
              // data: category,
              data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
              axisLine: {
                lineStyle: {
                  color: '#8b8b8b'
                }
              }
            }
          ],
          yAxis: [
            {
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#8b8b8b'
                }
              },
              min: datacolumnar.value.minValue,
              max: datacolumnar.value.maxValue
            },
            {
              splitLine: {
                show: false
              },
              axisLine: {
                lineStyle: {
                  color: '#8b8b8b'
                }
              },
              // min: rightCount,
              min: datacolumnar.contrasts ? datacolumnar.contrasts.minValue : 0,
              max: datacolumnar.contrasts ? datacolumnar.contrasts.maxValue : 0,
              axisLabel: {
                formatter: '{value} %'
              }
            }
          ],
          title: {
            text: datacolumnar.title,
            left:'3%',
            top:10
          },
          series: [
            {
              name: datas.contrasts.series1Title,
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              barGap: 0, //间距
              animationDuration: 1500,
              // symbol: 'emptyCircle',
              itemStyle: {
                normal: {
                  color: '#ea9e9b'
                }
              },
              yAxisIndex: 1,
              symbolSize: 8,
              // data: datacolumnar.contrasts.series1
              data: []
            },
            {
              name: datas.contrasts.series2Title,
              type: 'line',
              smooth: true,
              showAllSymbol: true,
              barGap: 0, //间距
              animationDuration: 1500,
              // symbol: 'emptyCircle',
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: '#5e9df8'
                }
              },
              yAxisIndex: 1,
              // data: datacolumnar.contrasts.series2
              data: []
            },
            {
              name: datas.value.series1Title,
              type: 'bar',
              symbol: 'rect',
              barGap: 0,
              animationDuration: 1500,
              // barWidth: 10,
              itemStyle: {
                normal: {
                  // barBorderRadius: 5,
                  // color: new echarts.graphic.LinearGradient(
                  //   0, 0, 0, 1,
                  //   [{
                  //       offset: 0,
                  //       color: '#e77c3b'
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: '#f4d06e'
                  //     }
                  //   ]
                  // )
                  color: '#e4ad40'
                }
              },
              // data: datacolumnar.value.series1
              data: []
            },
            {
              name: datas.value.series2Title,
              type: 'bar',
              symbol: 'rect',
              animationDuration: 1500,
              barGap: 0,
              itemStyle: {
                normal: {
                  // color: new echarts.graphic.LinearGradient(
                  //   0, 0, 0, 1,
                  //   [{
                  //       offset: 0,
                  //       color: '#e77c3b'
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: '#f4d06e'
                  //     }
                  //   ]
                  // )
                  color: '#CCFF33'
                }
              },
              // symbolOffset: ['-152%', '-100%'],
              symbolRepeat: true,
              symbolSize: [8, 4],
              symbolMargin: 1,
              z: -10,
              // data: datacolumnar.value.series2
              data: []
            },
            {
              name: datas.value.series3Title,
              type: 'bar',
              symbol: 'rect',
              animationDuration: 1500,
              barGap: 0,
              itemStyle: {
                normal: {
                  // color: new echarts.graphic.LinearGradient(
                  //   0, 0, 0, 1,
                  //   [{
                  //       offset: 0,
                  //       color: '#5dc7d2'
                  //     },
                  //     {
                  //       offset: 1,
                  //       color: '#77e7c9'
                  //     }
                  //   ]
                  // )
                  color: '#ccc'
                }
              },
              // symbolOffset: ['152%', '-100%'],
              symbolRepeat: true,
              symbolSize: [8, 4],
              symbolMargin: 1,
              z: -10,
              // data: datas.map(item => {
              //   return item.incomeMonthGoal
              // })
              // data: datacolumnar.value.series3
              data: []
            }
          ]
        }
        option.xAxis[1] = {
          type: 'value',
          max: option.xAxis[0].data.length * 100,
          show: false
        }
        //   option.series[0].data = option.series[0].data.map((x, i) => [35 + i * 100, x])
        //   option.series[1].data = option.series[1].data.map((x, i) => [65 + i * 100, x])
        let values = datacolumnar.value || {},
          contrasts = datacolumnar.contrasts || {},
          contrastsseries1 = [],
          contrastsseries2 = [],
          valuesseries1 = [],
          valuesseries2 = [],
          valuesseries3 = []
        this.dataSource[dio][type] = [
          {
            name: `${values.series1Title}<span class="mine-color-e4ad40"></span>`,
            ...values.series1
          },
          {
            name: `${values.series2Title}<span class="mine-color-CCFF33"></span>`,
            ...values.series2
          },
          {
            name: `${values.series3Title}<span class="mine-color-ccc"></span>`,
            ...values.series3
          },
          {
            name: `${contrasts.series1Title}<span class="mine-color-ea9e9b"></span>`,
            ...contrasts.series1
          },
          {
            name: `${contrasts.series2Title}<span class="mine-color-5e9df8"></span>`,
            ...contrasts.series2
          }
        ]
        if (dio == 2 && type == 4) {
          option.xAxis[0].data = ['燕园', '申园', '粤园', '蜀园', '吴园', '楚园', '大清谷']
          for (let i = 1; i <= 7; i++) {
            let mId = 'A01A01A01G0' + i
            let dseries1 = parseFloat(contrasts.series1[mId])
            let dseries2 = parseFloat(contrasts.series2[mId])
            let _series1 = parseFloat(values.series1[mId])
            let _series2 = parseFloat(values.series2[mId])
            let _series3 = parseFloat(values.series3[mId])
            contrastsseries1.push(dseries1)
            contrastsseries2.push(dseries2)
            valuesseries1.push(_series1)
            valuesseries2.push(_series2)
            valuesseries3.push(_series3)
          }
        } else {
          for (let i = 1; i <= 12; i++) {
            let mId = 'm' + (i < 10 ? '0' + i : i)
            let dseries1 = parseFloat(contrasts.series1[mId])
            let dseries2 = parseFloat(contrasts.series2[mId])
            let _series1 = parseFloat(values.series1[mId])
            let _series2 = parseFloat(values.series2[mId])
            let _series3 = parseFloat(values.series3[mId])
            contrastsseries1.push(dseries1)
            contrastsseries2.push(dseries2)
            valuesseries1.push(_series1)
            valuesseries2.push(_series2)
            valuesseries3.push(_series3)
          }
        }
        option.series[0].data = contrastsseries1
        option.series[1].data = contrastsseries2
        option.series[2].data = valuesseries1
        option.series[3].data = valuesseries2
        option.series[4].data = valuesseries3

        return option
      }
    },
    /* top1右侧 */
    drawChart2(datas, type, index) {
      // type:子级元素child  index:大类下标
      var xAxis = [],
        yAxis = [],
        series = [],
        title = [],
        grid = []
      //父级
      if (type == 0) {
        // 全国增长价值 销售情况 饼图初步改为柱状图
        if (datas[index].data1.title == 'EBITDA情况'||datas[index].data1.title == '销售情况') {
          // var datacolumnar2 = datas[index].data2;
          for (let i = 0; i < datas[index].length; i++) {
            let dataout = 'data' + (i + 2),
              falls = datas[index][dataout]
            xAxis.push({
              axisLabel: {
                interval: 0 //代表显示所有x轴标签显示
                //  rotate:45, //代表逆时针旋转45度
              },
              gridIndex: i,
              type: 'category',
              splitLine: { show: false },
              data: falls.value.series1Title
            })
            yAxis.push({
              gridIndex: i,
              type: 'value'
            })
            series.push(
              {
                xAxisIndex: i,
                yAxisIndex: i,
                name: '辅助',
                type: 'bar',
                stack: '辅助' + i,
                animationDuration: 1500,
                itemStyle: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  itemStyle: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                  }
                },
                data: falls.value.series1
              },
              {
                xAxisIndex: i,
                yAxisIndex: i,
                name: '生活费',
                type: 'bar',
                stack: '辅助' + i,
                itemStyle: {
                  barBorderColor: '#FFA500',
                  color: '#FFA500'
                },
                label: {
                  show: true,
                  position: 'inside'
                },
                data: falls.value.series2
              },
              {
                xAxisIndex: i,
                yAxisIndex: i,
                name: '生活费',
                type: 'bar',
                stack: '辅助' + i,
                itemStyle: {
                  barBorderColor: '#ccc',
                  color: '#ccc'
                },
                barMaxWidth: 30,
                itemStyle: {
                  barBorderColor: '#ccc',
                  color: '#ccc'
                },
                label: {
                  show: true,
                  position: 'inside'
                },
                data: falls.value.series3
              }
            )
            title.push({
              text: falls.title,
              left: i == 0 ? '20%' : '65%',
              top: i == 2 ? '52%' : 10,
              textAlign: 'center'
            })
            grid.push({
              top: i == 2 ? '60%' : 50,
              width: '45%',
              bottom: i == 1 ? '50%' : 15,
              left: i == 0 ? 10 : '50%',
              containLabel: true
            })
          }
        } else {
          var datacolumnar2 = datas[index].data2
          // pie1 = datas[0].data3,
          // pie2 = datas[0].data4;
          xAxis = [
            {
              type: 'category',
              splitLine: { show: false },
              data: datacolumnar2.value.series1Title,
              axisLabel: {
                interval: 0 //代表显示所有x轴标签显示
                //  rotate:45, //代表逆时针旋转45度
              }
            }
          ]
          yAxis = [
            {
              type: 'value'
            }
          ]
          series = [
            {
              name: '辅助',
              type: 'bar',
              stack: '总量',
              animationDuration: 1500,
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              },
              emphasis: {
                itemStyle: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: datacolumnar2.value.series1
            },
            {
              name: '生活费',
              type: 'bar',
              stack: '总量',
              animationDuration: 1500,
              itemStyle: {
                barBorderColor: '#FFA500',
                color: '#FFA500'
              },
              label: {
                show: true,
                position: 'inside'
              },
              data: datacolumnar2.value.series2
            },
            {
              name: '生活',
              type: 'bar',
              stack: '总量',
              animationDuration: 1500,
              barMaxWidth: 30,
              itemStyle: {
                barBorderColor: '#ccc',
                color: '#ccc'
              },
              label: {
                show: true,
                position: 'inside'
              },
              data: datacolumnar2.value.series3
            }
          ]
          title = [
            {
              text: datacolumnar2.title,
              left: '20%',
              top: 10,
              textAlign: 'center'
            }
          ]
          grid = [
            {
              top: 50,
              width: '50%',
              bottom: '5%',
              left: 10,
              containLabel: true
            },
            {
              top: '55%',
              width: '50%',
              bottom: 0,
              left: 10,
              containLabel: true
            },
            {
              top: '55%',
              width: '50%',
              bottom: 0,
              left: 10,
              containLabel: true
            }
          ]
          for (let i = 0; i < datas[index].length - 1; i++) {
            let datanum = 'data' + (i + 3),
              datacolumnar2 = datas[index][datanum],
              series_pie_data1 = []
            datacolumnar2.value.series1Title.forEach((element, index) => {
              series_pie_data1.push({
                value: datacolumnar2.value.series1[index],
                name: element + datacolumnar2.value.series1[index]
              })
            })
            series.push({
              name: '访问来源',
              type: 'pie',
              selectedMode: 'single',
              animationDuration: 1500,
              radius: '35%',
              center: ['75%', i == 0 ? '25%' : '75%'], //饼图位置控制
              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
            tooltip: {
            trigger: 'item',
            formatter: '{b} : {c} ({d}%)'
　　      },
              data: series_pie_data1
            })
            title.push({
              text: datacolumnar2.title,
              left: '75%',
              top: i == 0 ? '2%' : '50%',
              textAlign: 'center'
            })
          }
        }
      } else {
        if (datas[index].data1.title == 'EBITDA情况'||datas[index].data1.title == '销售情况') {
          // var datacolumnar2 = datas[index].data2;
          for (let k = 0; k < datas[index].child[type - 1].length; k++) {
            let dataser = 'data' + (k + 2),
              fallss = datas[index].child[type - 1][dataser]

            xAxis.push({
              axisLabel: {
                interval: 0 //代表显示所有x轴标签显示
              },
              gridIndex: k,
              type: 'category',
              splitLine: { show: false },
              data: fallss.value.series1Title
            })
            yAxis.push({
              gridIndex: k,
              type: 'value'
            })
            series.push(
              {
                xAxisIndex: k,
                yAxisIndex: k,
                name: '辅助',
                type: 'bar',
                animationDuration: 1500,
                stack: '辅助' + k,
                itemStyle: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                },
                emphasis: {
                  itemStyle: {
                    barBorderColor: 'rgba(0,0,0,0)',
                    color: 'rgba(0,0,0,0)'
                  }
                },
                data: fallss.value.series1
              },
              {
                xAxisIndex: k,
                yAxisIndex: k,
                name: '生活费',
                type: 'bar',
                animationDuration: 1500,
                itemStyle: {
                  barBorderColor: '#FFA500',
                  color: '#FFA500'
                },
                stack: '辅助' + k,
                label: {
                  show: true,
                  position: 'inside'
                },
                data: fallss.value.series2
              },
              {
                xAxisIndex: k,
                yAxisIndex: k,
                name: '辅助',
                type: 'bar',
                animationDuration: 1500,
                barMaxWidth: 30,
                stack: '辅助' + k,
                itemStyle: {
                  barBorderColor: '#ccc',
                  color: '#ccc'
                },
                // itemStyle: {
                //   barBorderColor: 'rgba(0,0,0,0)',
                //   color: 'rgba(0,0,0,0)'
                // },
                // emphasis: {
                //   itemStyle: {
                //     barBorderColor: 'rgba(0,0,0,0)',
                //     color: 'rgba(0,0,0,0)'
                //   }
                // },
                data: fallss.value.series3
              }
            )
            title.push({
              text: fallss.title,
              left: k == 0 ? '20%' : '65%',
              top: k == 2 ? '52%' : 10,
              textAlign: 'center'
            })
            grid.push({
              top: k == 2 ? '60%' : 50,
              width: '45%',
              bottom: k == 1 ? '50%' : 15,
              left: k == 0 ? 10 : '50%',
              containLabel: true
            })
          }
        } else {
          var datacolumnar2 = datas[index].child[type - 1].data2
          // pie1 = datas[0].data3,
          // pie2 = datas[0].data4;
          xAxis = [
            {
              type: 'category',
              splitLine: { show: false },
              data: datacolumnar2.value.series1Title,
              axisLabel: {
                interval: 0 //代表显示所有x轴标签显示
                //  rotate:45, //代表逆时针旋转45度
              }
            }
          ]
          yAxis = [
            {
              type: 'value'
            }
          ]
          series = [
            {
              name: '辅助',
              type: 'bar',
              stack: '总量',
              animationDuration: 1500,
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              },
              emphasis: {
                itemStyle: {
                  barBorderColor: 'rgba(0,0,0,0)',
                  color: 'rgba(0,0,0,0)'
                }
              },
              data: datacolumnar2.value.series1
            },
            {
              name: '生活费',
              type: 'bar',
              stack: '总量',
              animationDuration: 1500,
              itemStyle: {
                barBorderColor: '#FFA500',
                color: '#FFA500'
              },
              label: {
                show: true,
                position: 'inside'
              },
              data: datacolumnar2.value.series2
            },
            {
              name: '生活',
              type: 'bar',
              stack: '总量',
              animationDuration: 1500,
              barMaxWidth: 30,
              itemStyle: {
                barBorderColor: '#ccc',
                color: '#ccc'
              },
              label: {
                show: true,
                position: 'inside'
              },
              data: datacolumnar2.value.series3
            }
          ]
          title = [
            {
              text: datacolumnar2.title,
              left: '20%',
              top: 10,
              textAlign: 'center'
            }
          ]
          grid = [
            {
              top: 50,
              width: '50%',
              bottom: '5%',
              left: 10,
              containLabel: true
            },
            {
              top: '55%',
              width: '30%',
              bottom: 0,
              left: 10,
              containLabel: true
            },
            {
              top: '55%',
              width: '30%',
              bottom: 0,
              left: 10,
              containLabel: true
            }
          ]
          for (let i = 1; i < datas[index].child[type - 1].length; i++) {
            let datanum = 'data' + (i + 2),
              pie = datas[index].child[type - 1][datanum],
              series_pie_data1 = []
            pie.value.series1Title.forEach((element, index) => {
              series_pie_data1.push({
                value: pie.value.series1[index],
                name: element + pie.value.series1[index]
              })
            })
            series.push({
              name: '访问来源',
              type: 'pie',
              selectedMode: 'single',
              animationDuration: 1500,
              radius: '35%',
              center: ['75%', i == 0 ? '25%' : '75%'], //饼图位置控制
              label: {
                position: 'inner'
              },
              labelLine: {
                show: false
              },
              tooltip: {
                trigger: 'item',
                formatter: '{b} : {c} ({d}%)'
　　            },
              data: series_pie_data1
            })

            title.push({
              text: pie.title,
              left: '75%',
              top: i == 0 ? '2%' : '50%',
              textAlign: 'center'
            })
          }
        }
      }
      var option = {
        // backgroundColor: '#ffffff',
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
        //   }
        //   // formatter: function (params) {
        //   //     var tar = params[1];
        //   //     return tar.name + '<br/>' + tar.seriesName + ' : ' + tar.value;
        //   // }
        // },
        // grid: {
        //   bottom: 0,
        //   left: 0,
        //   right: 0,
        //   containLabel: true
        // },
        tooltip: {},
        grid: grid,
        // grid: [
        //   {
        //     top: 50,
        //     width: '40%',
        //     bottom: '5%',
        //     left: 10,
        //     containLabel: true
        //   },
        //   {
        //     top: '55%',
        //     width: '30%',
        //     bottom: 0,
        //     left: 10,
        //     containLabel: true
        //   },
        //   {
        //     top: '55%',
        //     width: '30%',
        //     bottom: 0,
        //     left: 10,
        //     containLabel: true
        //   }
        // ],
        xAxis: xAxis,
        // xAxis: [
        //     {
        //     type: 'category',
        //     splitLine: { show: false },
        //     data: datacolumnar2.value.series1Title
        //     //  axisLine: {
        //     //       lineStyle: {
        //     //         color: '#8b8b8b'
        //     //       }
        //     //     }
        //   }
        // ],
        yAxis: yAxis,
        // yAxis: [
        //   {
        //             type: 'value'
        //           }
        // ],
        title: title,
        // title: [
        //   {
        //     text: datacolumnar2.title,
        //     left: '20%',
        //     textAlign: 'center'
        //   },
        //   {
        //     text: pie1.title,
        //     left: '60%',
        //     textAlign: 'center'
        //   }
        // ],
        series: series
        // series: [
        //   {
        //     name: '辅助',
        //     type: 'bar',
        //     stack: '总量',
        //     itemStyle: {
        //       barBorderColor: 'rgba(0,0,0,0)',
        //       color: 'rgba(0,0,0,0)'
        //     },
        //     emphasis: {
        //       itemStyle: {
        //         barBorderColor: 'rgba(0,0,0,0)',
        //         color: 'rgba(0,0,0,0)'
        //       }
        //     },
        //     data: datacolumnar2.value.series1
        //   },
        //   {
        //     name: '生活费',
        //     type: 'bar',
        //     stack: '总量',
        //     label: {
        //       show: true,
        //       position: 'inside'
        //     },
        //     data: datacolumnar2.value.series1
        //   },
        //   {
        //     name: '访问来源',
        //     type: 'pie',
        //     selectedMode: 'single',
        //     radius: '50%',
        //     center: ['60%', '50%'], //饼图位置控制
        //     label: {
        //       position: 'inner'
        //     },
        //     labelLine: {
        //       show: false
        //     },
        //     data: []
        //   }
        // ]
      }
      // let series_pie_data = []
      // pie1.value[0].forEach((element, index) => {
      //   series_pie_data.push({ value: pie1.value[1][index], name: element + pie1.value[1][index] })
      // })
      // option.series[2].data = series_pie_data
      // if (type == 0) {
      //   let series_pie_data1 = []
      //   pie2.value[0].forEach((element, index) => {
      //     series_pie_data1.push({ value: pie2.value[1][index], name: element + pie2.value[1][index] })
      //   })
      //   option.series.push({
      //     name: '访问来源',
      //     type: 'pie',
      //     selectedMode: 'single',
      //     radius: '50%',
      //     center: ['90%', '50%'], //饼图位置控制
      //     label: {
      //       position: 'inner'
      //     },
      //     labelLine: {
      //       show: false
      //     },
      //     data: series_pie_data1
      //   })

      //   option.title.push({
      //     text: pie2.title,
      //     left: '90%',
      //     // top: '50%',
      //     textAlign: 'center'
      //   })
      // }
      console.log(option)
      return option
    },
    // 园区:价值
    drawChart3(datas, index) {
      // datas：具体数据     index:大类下标
      var xAxis = [],
        yAxis = [],
        series = [],
        title = [],
        grid = []
        // 园区 增长与价值 ebita和销售父级改为柱状图
      if (index == 1||index == 2) {
        //ebitda 瀑布
        xAxis.push({
          axisLabel: {
            interval: 0 //代表显示所有x轴标签显示
            //  rotate:45, //代表逆时针旋转45度
          },
          gridIndex: 0,
          type: 'category',
          splitLine: { show: false },
          data: datas.value.series1Title
        })
        yAxis.push({
          gridIndex: 0,
          type: 'value'
        })
        series.push(
          {
            name: '辅助',
            type: 'bar',
            stack: '辅助',
            animationDuration: 1500,
            itemStyle: {
              barBorderColor: 'rgba(0,0,0,0)',
              color: 'rgba(0,0,0,0)'
            },
            emphasis: {
              itemStyle: {
                barBorderColor: 'rgba(0,0,0,0)',
                color: 'rgba(0,0,0,0)'
              }
            },
            data: datas.value.series1
          },
          {
            name: '生活费',
            type: 'bar',
            stack: '辅助',
            itemStyle: {
              barBorderColor: '#FFA500',
              color: '#FFA500'
            },
            label: {
              show: true,
              position: 'inside'
            },
            data: datas.value.series2
          },
          {
            name: '生活费',
            type: 'bar',
            stack: '辅助',
            barMaxWidth: 30,
            itemStyle: {
              barBorderColor: '#ccc',
              color: '#ccc'
            },
            label: {
              show: true,
              position: 'inside'
            },
            data: datas.value.series3
          }
        )
        title.push({
          text: datas.title,
          left: '50%',
          top: 10,
          textAlign: 'center'
        })
        grid.push({
          top: 40,
          width: '90%',
          bottom: 10,
          left: '4%',
          containLabel: true
        })
      } else {
        series = []
        title = [
          {
            text: datas.title,
            left: '50%',
            top: 10,
            textAlign: 'center'
          }
        ]
        grid = [
          {
            top: 10,
            width: '50%',
            bottom: '5%',
            left: 10,
            containLabel: true
          }
        ]

        let series_pie_data1 = []
        datas.value.series1Title.forEach((element, index) => {
          series_pie_data1.push({
            value: datas.value.series1[index],
            name: element + datas.value.series1[index]
          })
        })
        series.push({
          name: '访问来源',
          type: 'pie',
          selectedMode: 'single',
          animationDuration: 1500,
          radius: '65%',
          center: ['50%', '30%'], //饼图位置控制
          label: {
            position: 'inner'
          },
          tooltip: {
              trigger: 'item',
              formatter: '{b} : {c} ({d}%)'
　　      },
          labelLine: {
            show: false
          },
          data: series_pie_data1
        })
      }
      var option = {
        tooltip: {},
        grid: grid,
        xAxis: xAxis,
        yAxis: yAxis,
        title: title,
        series: series
      }
      return option
    },
    /* 监听日期改变 */
    changeDate(code) {
      this.selecetmodel = false
      let arr = this.yearMonthList.arr
      this.yearMonthList.value = arr.find(item => {
        return item.value === code
      })
      this.queryBtnGroups()
    },
    /* 监听园区改变 */
    typeChange(code) {
      this.selecetmodel = false
      let arr = this.departInfo.arr
      this.departInfo.value = arr.find(item => {
        return item.value === code
      })
      this.$set(this.departInfo.value, 'value', code)

      this.queryBtnGroups()
    } /* 监听维度改变 */,
    departChange(code) {
      this.selecetmodel = false
      let arr = this.departdepart.arr
      this.departdepart.value = arr.find(item => {
        return item.value === code
      })
      this.$set(this.departdepart.value, 'value', code)
      // this.$forceUpdate()
      this.queryBtnGroups()
    }
  }
}
</script>
<style scoped>
.ant-card-body .table-operator {
  margin-bottom: 18px;
}
.anty-row-operator button {
  margin: 0 5px;
}
.ant-btn-danger {
  background-color: #ffffff;
}

.ant-modal-cust-warp {
  height: 100%;
}
.ant-modal-cust-warp .ant-modal-body {
  height: calc(100% - 110px) !important;
  overflow-y: auto;
}
.ant-modal-cust-warp .ant-modal-content {
  height: 90% !important;
  overflow-y: hidden;
}
.grid-progress .gutter-box {
  padding: 10px 0;
  text-align: center;
  vertical-align: middle;
  box-sizing: border-box;
  font-weight: bold;
  line-height: 28px;
}
.grid-chart-border {
  padding: 0px 0;
}
.grid-chart-border h2 {
  text-align: center;
  color: #666;
}
.bgchart {
  padding: 10px;
}
.mt30 {
  margin-top: 30px;
}
.gutter-row-card .ant-card-body {
  padding: 0 !important;
}
.ant-card /deep/ .ant-card-body {
  padding: 0px !important;
}
.ant-table-wrapper /deep/ .ant-table-thead > tr {
  height: 45px;
  min-height: 45px;
}
.completion-on-block{
  justify-content: center
}
</style>

<style lang="less">
.menu-box {
  margin-bottom: 10px;

  [class*='query-'] {
    float: left;
    margin-right: 10px;
  }

  /deep/.ant-select {
    width: 150px;
  }
}
.completion-on-block {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mine-color-CCFF33 {
  width: 28px;
  height: 14px;
  background: #ccff33;
  border-radius: 2px;
}
.mine-color-e4ad40 {
  width: 28px;
  height: 14px;
  background: #e4ad40;
  border-radius: 2px;
}
.mine-color-ccc {
  width: 28px;
  height: 14px;
  background: #ccc;
  border-radius: 2px;
}
.mine-color-5e9df8 {
  width: 28px;
  height: 14px;
  display: flex;
  align-items: center;
  position: relative;
  &::before {
    content: '';
    width: 100%;
    height: 1px;
    background: #5e9df8;
  }
  &::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 1px solid #5e9df8;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 1px;
    display: block;
  }
}
.mine-color-ea9e9b {
  width: 28px;
  height: 14px;
  display: flex;
  align-items: center;
  position: relative;
  &::before {
    content: '';
    width: 100%;
    height: 1px;
    background: #ea9e9b;
  }
  &::after {
    content: '';
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 1px solid #ea9e9b;
    border-radius: 50%;
    position: absolute;
    left: 8px;
    top: 1px;
    display: block;
  }
}
</style>